<template>
  <div class="address-list">
    <div class="list">
      <Scroll v-if="address && address.length">
        <div
          class="addr-item"
          v-for="(item, index) of address"
          :key="index"
          @click="addrPanelClick(item)"
        >
          <div class="left">
            <p class="user-info">
              <span class="name">{{item.receiver_name}}</span>
              <span class="tel">{{item.receiver_phone}}</span>
            </p>
            <p class="addr">
              <span
                class="status"
                v-if="parseInt(item.is_default)"
              >{{parseInt(item.is_default) ? '默认' : ''}}</span>
              <span
                v-if="item.area.split('-')[0] !== item.area.split('-')[1]"
              >{{item.area.split('-')[0]}} {{item.area.split('-')[1]}}</span>
              <span v-else>{{item.area.split('-')[0]}}</span>

              {{item.area.split('-')[2]}} {{item.address}}
            </p>
          </div>
          <div
            class="right"
            @click.stop="$router.push({path: '/my/exchange-center/integral-goods/order/address-list/edit-address', query: {addr: JSON.stringify(item), isEdit: 1}})"
          >编 辑</div>
        </div>
      </Scroll>
      <no-result v-else msg="快去添加地址吧~" :src="require('@/assets/images/1-zwnr.png')" />
    </div>
    <div class="btn">
      <my-button
        name="添加地址"
        @btnClick="$router.push({path: '/my/exchange-center/integral-goods/order/address-list/edit-address'})"
      />
    </div>
    <transition name="slide">
      <router-view @success="handleSuccess"></router-view>
    </transition>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import NoResult from '@/components/no-result/no-result'
import AddrList from '@/views/my/mixins/addr-list'
import { setDefaultAddr } from '@/api/my'

const ERR_OK = 200
export default {
  components: {
    Scroll,
    NoResult
  },
  mixins: [AddrList],
  data () {
    return {}
  },
  methods: {
    addrPanelClick (item) {
      this._setDefaultAddr(item.id).then(() => {
        this.$router.replace({ path: '/my/exchange-center/integral-goods/order', query: { delivery_type: this.$route.query.delivery_type, id: this.$route.query.id } })
        this.$emit('success')
      })
    },
    handleSuccess () {
      this._getAddressList()
    },
    _setDefaultAddr (id) {
      return setDefaultAddr(id)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.address-list {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f7f7f7;
  padding: 0.52rem 0.36rem 0.6rem 0.36rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .btn {
    width: 100%;
    font-size: 0;
  }
  .list {
    flex: 1;
    .addr-item {
      width: 100%;
      background: rgba(255, 255, 255, 1);
      padding: 0.55rem 0.36rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.3rem;
      .left {
        .user-info {
          display: flex;
          align-items: center;
          .name {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(0, 4, 0, 1);
            margin-right: 0.26rem;
          }
          .tel {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
        .addr {
          margin-top: 0.32rem;
          font-size: 0.22rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(68, 68, 68, 1);
          line-height: 0.42rem;
          width: 4.28rem;
          .status {
            padding: 0.06rem 0.08rem;
            font-size: 0.24rem;
            line-height: 0.24rem;
            height: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            background: #000400;
            white-space: nowrap;
            display: inline-block;
            margin-right: 0.1rem;
            // margin-top: 0.2rem;
          }
        }
      }
      .right {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        padding: 0 0.2rem 0 0.32rem;
        white-space: nowrap;
        line-height: 0.52rem;
        border-left: 1px solid #e9e9e9;
      }
    }
  }
}
</style>
